<template>
  <div class="echarts" :id="id"></div>
</template>
<script>
  let echarts = require("echarts");
  let moment = require("moment");
  var Echarts = null;

  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  export default {
    data() {
      return {
        option:{
          grid:{
            left:'8%',
            right:'14%',
            top:'10%',
            bottom:"10%"
          },
          tooltip: {
            trigger: 'axis'
          },
          color:['#ffec8c','#1145c2'],
          xAxis: {
            type: 'category',
            axisLabel:{
              color:'#5888bf'
            },
            data:[]
          },
          yAxis:[
            {
              position: 'left',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#5888bf'
                }
              },
              axisTick: {
                show: false,
                alignWithLabel:true
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#515254'
                }
              },
              type: 'value'
            },
            {
              position: 'right',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#5888bf'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#515254'
                }
              },
              type: 'value'
            },
          ],
          legend: {
            data:[],
            top:'5px',
            textStyle:{
              color:'#5888bf'
            },
          },
          series: []
        },
        myChart:null,
      }
    },
    props:{
      id:{
        default:'',
      },
      companyPassengerFlowData:{
        type:Object,
        default(){
          return {
            xData:[]
          }
        }
      }
    },
    created(){

    },
    mounted(){
      this.myChart = echarts.init(document.getElementById(this.id));
      this.$Bus.$on('WinResize', () => {
        this.myChart.resize();
      });
    },
    watch:{
    },
    beforeDestroy(){
      this.$Bus.$off('WinResize')
    },
    methods: {
      setOption() {
        // console.log(this.companyPassengerFlowData,'companyPassengerFlowData');
        let data = this.companyPassengerFlowData
        this.option.xAxis.data = [];
        this.option.series = [];
        this.option.legend.data = [];

        this.option.xAxis.data = data.xData
        for (let i in data.yData) {
          let obj = {
            name: '',
            data: [],
            type: 'bar',
            barMaxWidth:'12px',
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            },
          }
          let name = i == 'entersToday' ? '进入人数' : '销售金额'
          let yAxisIndex = i == 'entersToday' ? 0 : 1
          obj.name = name
          obj.yAxisIndex = yAxisIndex
          obj.type = i == 'entersToday' ? 'bar' : 'line'
          obj.data = data.yData[i]
          this.option.series.push(obj)
          this.option.legend.data.push(name)
        }
        this.$nextTick(()=>{
          this.myChart.setOption(this.option,true);
          this.$Bus.$emit('Loading', false);
        })
      }
    }
  }
</script>

<style scoped>
  .echarts{
    width: 100%;
    height:100%;
  }
</style>